<template>
  <div class="mainpage">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" >
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item v-for="item in carList" :key="item.idxId">
          <img :src="item.url" />
        </van-swipe-item>
      </van-swipe>
      <van-search v-model="queryInfo.query" placeholder="请输入搜索关键词" @search="onSearch" />
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :offset="10"  @load="onLoad">
        <van-cell class="postContrainer" v-for="item in postList" :key="item.postmainId"  @click="toPostBody(item)" >
          <template #title >
            <span class="titleName">{{item.postTitle}}</span>
            <div class="cTime">{{item.createTime}}</div>
            <div class="cellValue">
              <img class="postImg" src="../../../public/image/Egame1.png" alt="这是一张图片">
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //轮播图
      carList: [],
      //商品列表
      postList: [],
      queryInfo: {
        query: '',
        //当前页数
        pagenum: 1,
        //当前每页显示多少数据
        pagesize: 10
      },
      total: '',
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  created() {
    this.getCarList()
  },
  methods: {
    async getPostList() {
      const {data: res} = await this.$http.post("/api/post/getAllPostForUser",{query: this.queryInfo.query,pagenum:this.queryInfo.pagenum,pagesize:this.queryInfo.pagesize})
      if (res.code !== 200) {
        this.$toast('论坛加载失败')
        return
      }
      if (res.data.records.length === 0) {  		// 判断获取数据条数若等于0
        this.finished = true;		// 停止加载
      }
      //数据不为0
      this.postList.push(...res.data.records)//加载数据
      this.total = res.data.total //给数据条数赋值
      this.loading = false			// 加载状态结束 
      // 如果list长度大于等于总数据条数,数据全部加载完成
      if (this.postList.length >= res.data.total) {
          this.finished = true	// 结束加载状态
      }
      console.log(res.data)
    },
    onLoad() {
      this.getPostList()
      this.queryInfo.pagenum++
    },
    onSearch() {
      this.queryInfo.pagenum = 1 //设置查询页数为1
      this.postList = [] //置空帖子列表
      this.finished = false //重置加载状态
      this.onLoad()
    },
    async getCarList() {
      const {data: res} = await this.$http.get("/api/index/getAllIdxcarousel")
      if (res.code !== 200) {
        this.$toast('轮播图加载失败')
        return 
      }
      console.log(res)
      this.carList = res.data
    },
    onRefresh() {
      this.queryInfo.pagenum = 1
      this.onLoad()
      this.postList = []
      this.$toast('刷新成功')
      this.finished = false
      this.isLoading = false
    },
    toPostBody(item) {
      this.$router.push({name: 'userPostMain', params: {pt: item}})
    }
    // async getGoodsList() {
    //   //获取商品列表
    //   const {data: res } =await this.$http.post('/api/goods/getAllGoods',{query: '', pagenum: '1', pagesize: '4'})
    //   if (res.code !== 200) {
    //     this.$toast('商品列表加载失败')
    //     return 
    //   }
    //   console.log(res)
    //   this.goodsList = res.data.records
    // },
    // goodsInfo(id) {
    //   this.$router.push({name: 'goodsInfo',params: {goodsId: id}})
    // }
  }

}
</script>

<style lang="less" scoped>
.mygrid {
  margin-top: 20px;
}
.my-swipe {
  height: 200px;
}
img {
  width: 100%;
  height: 100%;
}
.postContrainer {
  height: 80px;
}
.mainpage {
  margin-bottom: 50px;
}
.titleName {
  position: absolute;
  width: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cTime {
  position: absolute;
  display: inline-block;
  width: 40%;
  top: 50%;
}
.cellValue {
  position: absolute;
  height: 60%;
  width: 50%;
  left: 45%;
  text-align: right;
    .postImg {
      width: 100%;
      height: 100%;
    }
}
</style>